<script lang='ts'>
import { defineComponent, watch, ref } from 'vue'
import { Search } from '@element-plus/icons'
export default defineComponent({
    name: 'JxtechSearchInput'
})
</script>
<script lang='ts' setup>
const emit = defineEmits<{
    (e: 'update:value', value: string | Array<any> | undefined): void;
    (e: 'search', value: string | undefined): void
}>()

const props = defineProps({
    value: String,
})

//设置双向绑定
const modelValue = ref(props.value)
watch(() => modelValue.value, val => {
    emit("update:value", val)
})
watch(() => props.value, val => {
    modelValue.value = val
})

//搜索
const onSerach = () => {
    emit("search", modelValue.value)
}
</script>
<template>
    <el-input v-model="modelValue" @keyup.enter="onSerach">
        <template #suffix>
            <el-icon class="el-input__icon" @click="onSerach">
                <search />
            </el-icon>
        </template>
    </el-input>
</template>